<template>
  <div class="app-container">
    <!--表格-->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%">
      <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
      <el-table-column prop="user.userName" label="申请人" align="center" ></el-table-column>
      <el-table-column prop="applyMoney" label="申请金额" align="center" ></el-table-column>
      <el-table-column prop="applyDate" label="申请日期" align="center" ></el-table-column>
      <el-table-column prop="aState.applyStateName" label="状态" align="center" ></el-table-column>
      <el-table-column label="操作" min-width="200" align="center">
        <template slot-scope="scope">
          <el-button  size="mini" type="success" icon="el-icon-check" @click="accessApply(scope.row)">通过</el-button>
          <el-button  size="mini" type="warning" icon="el-icon-delete" @click="backApply(scope.row)">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br/>
    <!--分页栏-->
    <el-row>
      <el-col :span="20" align="center">
        <el-pagination background layout="prev, pager, next" :current-page="currentPage"
                       :hide-on-single-page="hidePage" :page-size="pageSize" :total="total" @current-change="page"></el-pagination>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import result from '@/utils/cbp-request.js'
  // 编写vue.js代码
  export default {
    data() {
      return {
        currentPage:1,
        pageSize:10,
        total:0,
        hidePage:true,
        tableData:[],
      }
    },
    methods: {
      page(pageNum){
        result({
          url:'/apply/page/'+pageNum+"/"+this.pageSize,
          method:'get',
        }).then((resp) =>{
          this.tableData = resp.data.list;
          this.total = resp.data.total;
          this.currentPage = resp.data.pageNum;
        })
      },
      accessApply(apply){
        result({
          url: '/apply/access',
          method: 'put',
          data:apply
        }).then((resp) => {
          if (resp.status === 2000) {
            this.$message({
              message: resp.msg,
              type: 'success'
            });
            this.page(this.currentPage)//刷新
          }
        })
      },
      backApply(apply){
        result({
          url: '/apply/back',
          method: 'put',
          data:apply
        }).then((resp) => {
          if (resp.status === 2000) {
            this.$message({
              message: resp.msg,
              type: 'success'
            });
            this.page(this.currentPage)//刷新
          }
        })
      },
    },mounted() {
      this.page(1);
    }
  }
</script>

<style scoped>
  .app-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 84px);
  }
</style>
